<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 顶部导航栏 -->
        <Header />
        <!-- 左侧导航栏 -->
        <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
            <nav class="py-4">
                <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
                    <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
                        :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
                        <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
                        <span>{{ menu.name }}</span>
                        <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
                            :class="{ 'transform rotate-180': menu.expanded }"></i>
                    </div>
                    <div v-if="menu.expanded" class="bg-gray-900">
                        <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
                            class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
                            :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
                            <a v-if="submenu.link" :href="submenu.link" data-readdy="true" class="text-sm">{{
                                submenu.name }}</a>
                            <span v-else class="text-sm">{{ submenu.name }}</span>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>
        <!-- 主内容区域 -->
        <main class="pt-16 pl-64">
            <div class="container mx-auto p-6">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm mb-4 text-gray-500">
                    <span>首页</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span>风险研判</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <a href="/risk-analysis"
                        data-readdy="true" class="hover:underline">风险管理与分析</a>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span class="text-blue-600 font-medium">重点风险提示</span>
                </div>
                <!-- 页面标题 -->
                <div class="flex justify-between items-center mb-6">
                    <h1 class="text-2xl font-bold text-gray-800">重点风险提示</h1>
                </div>
                <!-- 筛选功能区 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <h2 class="font-bold text-lg text-gray-800 mb-4">风险筛选</h2>
                    <!-- 风险等级筛选 -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">风险等级</label>
                        <div class="flex flex-wrap gap-2">
                            <button v-for="(level, idx) in riskLevels" :key="idx"
                                class="px-3 py-1.5 text-sm rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                                :class="level.active ? level.activeClass : 'bg-gray-100 text-gray-600'"
                                @click="toggleRiskLevel(idx)">
                                <span class="w-2 h-2 rounded-full mr-1.5" :class="level.dotClass"></span>
                                {{ level.name }}
                            </button>
                        </div>
                    </div>

                    <!-- 单行筛选：时间范围、区域筛选、关键词搜索 -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <!-- 时间范围筛选 -->
                        <div>
                            <label class="block textsm font-medium text-gray-700 mb-1">时间范围</label>
                            <div class="relative">
                                <button @click="toggleTimeDropdown"
                                    class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                    <span>{{ selectedTimeRange }}</span>
                                    <i class="fas fa-calendar-alt ml-2"></i>
                                </button>
                                <div v-if="showTimeDropdown"
                                    class="absolute z-20 mt-1 w-full bg-white rounded-md shadow-lg py-1">
                                    <button v-for="(option, index) in timeRangeOptions" :key="index"
                                        @click="selectTimeRange(option)"
                                        class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                        {{ option }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 区域筛选 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">区域筛选</label>
                            <div class="relative">
                                <button @click="toggleAreaDropdown"
                                    class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                    <span>{{ selectedArea }}</span>
                                    <i class="fas fa-chevron-down ml-2"></i>
                                </button>
                                <div v-if="showAreaDropdown"
                                    class="absolute z-20 mt-1 w-full bg-white rounded-md shadow-lg py-1">
                                    <button v-for="(option, index) in areaOptions" :key="index"
                                        @click="selectArea(option)"
                                        class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                        {{ option }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 关键词搜索 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">关键词搜索</label>
                            <div class="relative">
                                <input v-model="searchKeyword" type="text" placeholder="输入风险关键词进行搜索..."
                                    class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 风险统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                            <i class="fas fa-exclamation-triangle text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">风险总数</div>
                            <div class="text-2xl font-bold text-gray-900">{{ totalRisks }}</div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-4">
                            <i class="fas fa-radiation text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">高风险</div>
                            <div class="text-2xl font-bold text-gray-900">{{ highRisksCount }}</div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mr-4">
                            <i class="fas fa-exclamation-circle text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">中风险</div>
                            <div class="text-2xl font-bold text-gray-900">{{ mediumRisksCount }}</div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4">
                            <i class="fas fa-exclamation text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">低风险</div>
                            <div class="text-2xl font-bold text-gray-900">{{ lowRisksCount }}</div>
                        </div>
                    </div>
                </div>
                <!-- 风险列表 -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800">风险列表</h2>
                        <div class="flex space-x-3">
                            <button
                                @click="exportRiskData"
                                class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-200">
                                <i class="fas fa-download mr-2"></i> 导出数据
                            </button>
                            <button
                                @click="refreshData"
                                class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:bg-blue-700">
                                <i class="fas fa-sync-alt mr-2"></i> 刷新数据
                            </button>
                        </div>
                    </div>
                    <!-- 风险列表表格 -->
                    <div class="overflow-x-auto w-full">
                        <table class="w-full table-fixed divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th
                                        class="w-28 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        风险编号</th>
                                    <th
                                        class="w-32 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        风险类型</th>
                                    <th
                                        class="w-64 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        风险描述</th>
                                    <th
                                        class="w-32 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        影响区域</th>
                                    <th
                                        class="w-32 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        发现时间</th>
                                    <th
                                        class="w-24 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        风险等级</th>
                                    <th
                                        class="w-28 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr v-for="(risk, index) in paginatedRisks" :key="index" class="hover:bg-gray-50">
                                    <td class="px-4 py-4 text-sm text-gray-900">{{ risk.id }}</td>
                                    <td class="px-4 py-4">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center"
                                                :class="risk.iconBg">
                                                <i :class="risk.icon + ' text-white text-xs'"></i>
                                            </div>
                                            <div class="ml-2">
                                                <div class="text-sm font-medium text-gray-900 truncate">{{ risk.type }}
                                                </div>
                                                <div class="text-xs text-gray-500 truncate">{{ risk.source }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-4">
                                        <div class="text-sm text-gray-900 line-clamp-2">{{ risk.description }}</div>
                                    </td>
                                    <td class="px-4 py-4">
                                        <div class="text-sm text-gray-900 truncate">{{ risk.area }}</div>
                                        <div class="text-xs text-gray-500 truncate">{{ risk.location }}</div>
                                    </td>
                                    <td class="px-4 py-4">
                                        <div class="text-sm text-gray-900">{{ risk.date }}</div>
                                        <div class="text-xs text-gray-500">{{ risk.time }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="risk.levelClass">
                                            {{ risk.level }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-2">
                                            <button @click="viewRiskDetail(risk)"
                                                class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">查看</button>
                                            <button @click="openAssessmentModal(risk)"
                                                class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer">评估</button>
                                            <button @click="openHandleModal(risk)"
                                                class="text-orange-600 hover:text-orange-800 !rounded-button whitespace-nowrap cursor-pointer">处理</button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 分页控件 -->
                    <div class="flex flex-col md:flex-row justify-between items-center mt-6">
                        <div class="text-sm text-gray-500 mb-3 md:mb-0">
                            显示 {{ (currentPage - 1) * pageSize + 1 }} 至 {{ Math.min(currentPage * pageSize,
                                filteredRisks.length) }} 条，共 {{ filteredRisks.length }} 条
                        </div>
                        <div class="flex items-center">
                            <div class="mr-4">
                                <label class="text-sm text-gray-500 mr-2">每页显示:</label>
                                <select v-model="pageSize"
                                    class="bg-gray-100 border-none rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option v-for="size in pageSizeOptions" :key="size" :value="size">{{ size }}
                                    </option>
                                </select>
                            </div>
                            <div class="flex space-x-1">
                                <button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1"
                                    class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
                                    :class="currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'">
                                    上一页
                                </button>
                                <button v-for="page in displayedPages" :key="page" @click="goToPage(page)"
                                    class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
                                    :class="currentPage === page ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'">
                                    {{ page }}
                                </button>
                                <button @click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages"
                                    class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
                                    :class="currentPage === totalPages ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'">
                                    下一页
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!-- 风险详情模态框 -->
        <div v-if="showRiskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg w-3/4 max-w-4xl max-h-[80vh] overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-2xl font-bold text-gray-800">风险详情</h2>
                        <button @click="showRiskModal = false" class="text-gray-500 hover:text-gray-700 cursor-pointer">
                            <i class="fas fa-times text-xl"></i>
                        </button>
                    </div>
                    <div class="space-y-6">
                        <!-- 基本信息 -->
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">基本信息</h3>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <p class="text-sm text-gray-500">风险编号</p>
                                    <p class="text-base text-gray-900">{{ selectedRisk.id }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">风险类型</p>
                                    <div class="flex items-center">
                                        <div class="w-6 h-6 rounded-full flex items-center justify-center mr-2"
                                            :class="selectedRisk.iconBg">
                                            <i :class="selectedRisk.icon + ' text-white text-xs'"></i>
                                        </div>
                                        <p class="text-base text-gray-900">{{ selectedRisk.type }}</p>
                                    </div>
                                </div>
                                <div class="col-span-2">
                                    <p class="text-sm text-gray-500">风险描述</p>
                                    <p class="text-base text-gray-900">{{ selectedRisk.description }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">影响区域</p>
                                    <p class="text-base text-gray-900">{{ selectedRisk.area }} - {{
                                        selectedRisk.location }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">发现时间</p>
                                    <p class="text-base text-gray-900">{{ selectedRisk.date }} {{ selectedRisk.time }}
                                    </p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">风险等级</p>
                                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                        :class="selectedRisk.levelClass">
                                        {{ selectedRisk.level }}
                                    </span>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">风险来源</p>
                                    <p class="text-base text-gray-900">{{ selectedRisk.source }}</p>
                                </div>
                            </div>
                        </div>
                        <!-- 历史记录 -->
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">历史记录</h3>
                            <div class="space-y-4">
                                <div v-for="(record, index) in riskHistory" :key="index" class="flex items-start">
                                    <div class="w-8 flex-shrink-0">
                                        <div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-900">{{ record.action }}</p>
                                        <p class="text-xs text-gray-500">{{ record.time }} - {{ record.operator }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 处理建议 -->
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">处理建议</h3>
                            <div class="space-y-2">
                                <div v-for="(suggestion, index) in riskSuggestions" :key="index"
                                    class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <p class="text-base text-gray-900">{{ suggestion }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-6 flex justify-end">
                        <button @click="showRiskModal = false"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 !rounded-button whitespace-nowrap cursor-pointer">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 风险评估模态框 -->
        <div v-if="showAssessmentModal"
            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg w-3/4 max-w-3xl max-h-[80vh] overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-2xl font-bold text-gray-800">风险评估</h2>
                        <button @click="showAssessmentModal = false"
                            class="text-gray-500 hover:text-gray-700 cursor-pointer">
                            <i class="fas fa-times text-xl"></i>
                        </button>
                    </div>
                    <!-- 风险基本信息 -->
                    <div class="bg-gray-50 p-4 rounded-lg mb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">风险基本信息</h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <p class="text-sm text-gray-500">风险编号</p>
                                <p class="text-base text-gray-900">{{ assessmentRisk.id }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">风险类型</p>
                                <div class="flex items-center">
                                    <div class="w-6 h-6 rounded-full flex items-center justify-center mr-2"
                                        :class="assessmentRisk.iconBg">
                                        <i :class="assessmentRisk.icon + ' text-white text-xs'"></i>
                                    </div>
                                    <p class="text-base text-gray-900">{{ assessmentRisk.type }}</p>
                                </div>
                            </div>
                            <div class="col-span-2">
                                <p class="text-sm text-gray-500">风险描述</p>
                                <p class="text-base text-gray-900">{{ assessmentRisk.description }}</p>
                            </div>
                        </div>
                    </div>
                    <!-- 评估表单 -->
                    <form @submit.prevent="submitAssessment" class="space-y-6">
                        <div class="grid grid-cols-2 gap-6">
                            <!-- 可能性评分 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">可能性评分</label>
                                <div class="relative">
                                    <button type="button" @click="toggleProbabilityDropdown"
                                        class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                        <span>{{ probabilityOptions[assessmentForm.probability - 1]?.label || '请选择'
                                        }}</span>
                                        <i class="fas fa-chevron-down text-xs"></i>
                                    </button>
                                    <div v-if="showProbabilityDropdown"
                                        class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                        <div class="py-1">
                                            <button v-for="option in probabilityOptions" :key="option.value"
                                                type="button" @click="selectProbability(option.value)"
                                                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                {{ option.label }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 影响程度评分 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">影响程度评分</label>
                                <div class="relative">
                                    <button type="button" @click="toggleImpactDropdown"
                                        class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                        <span>{{ impactOptions[assessmentForm.impact - 1]?.label || '请选择' }}</span>
                                        <i class="fas fa-chevron-down text-xs"></i>
                                    </button>
                                    <div v-if="showImpactDropdown"
                                        class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                        <div class="py-1">
                                            <button v-for="option in impactOptions" :key="option.value" type="button"
                                                @click="selectImpact(option.value)"
                                                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                {{ option.label }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 评估理由 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">评估理由</label>
                            <textarea v-model="assessmentForm.reason" rows="4"
                                class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请详细描述评估理由..." maxlength="500"></textarea>
                            <div class="text-xs text-gray-500 mt-1">{{ assessmentForm.reason.length }}/500</div>
                        </div>
                        <!-- 评估人信息 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">评估人</label>
                            <input type="text" v-model="assessmentForm.assessor"
                                class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入评估人姓名">
                        </div>
                        <!-- 风险评分结果 -->
                        <div v-if="assessmentForm.probability && assessmentForm.impact"
                            class="bg-blue-50 p-4 rounded-lg">
                            <h4 class="text-sm font-medium text-blue-800 mb-2">评估结果预览</h4>
                            <div class="grid grid-cols-3 gap-4">
                                <div>
                                    <p class="text-xs text-blue-600">风险评分</p>
                                    <p class="text-lg font-bold text-blue-900">{{ calculateRiskScore }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-blue-600">风险等级</p>
                                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                        :class="calculateRiskLevel.class">
                                        {{ calculateRiskLevel.label }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-end space-x-4 pt-4">
                            <button type="button" @click="showAssessmentModal = false"
                                class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 !rounded-button whitespace-nowrap cursor-pointer">
                                取消
                            </button>
                            <button type="submit" :disabled="!isFormValid"
                                class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed !rounded-button whitespace-nowrap cursor-pointer">
                                提交评估
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 风险处理模态框 -->
    <div v-if="showHandleModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
            <div class="mt-3">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold text-gray-800">风险处理</h3>
                    <button @click="showHandleModal = false" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <!-- 风险信息概览 -->
                <div class="bg-gray-50 p-4 rounded-lg mb-6">
                    <h4 class="text-sm font-medium text-gray-700 mb-2">处理风险信息</h4>
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div>
                            <span class="text-gray-500">风险名称：</span>
                            <span class="font-medium">{{ selectedRisk.name }}</span>
                        </div>
                        <div>
                            <span class="text-gray-500">风险等级：</span>
                            <span class="px-2 py-1 text-xs font-semibold rounded-full"
                                :class="selectedRisk.levelClass">{{ selectedRisk.level }}</span>
                        </div>
                        <div>
                            <span class="text-gray-500">所属区域：</span>
                            <span class="font-medium">{{ selectedRisk.area }}</span>
                        </div>
                        <div>
                            <span class="text-gray-500">发现时间：</span>
                            <span class="font-medium">{{ selectedRisk.date }}</span>
                        </div>
                    </div>
                </div>

                <form @submit.prevent="submitHandle">
                    <!-- 处理方式 -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">处理方式 <span class="text-red-500">*</span></label>
                        <select v-model="handleForm.method" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                            <option value="">请选择处理方式</option>
                            <option value="立即处理">立即处理</option>
                            <option value="计划处理">计划处理</option>
                            <option value="监控观察">监控观察</option>
                            <option value="风险转移">风险转移</option>
                            <option value="风险接受">风险接受</option>
                        </select>
                    </div>

                    <!-- 处理描述 -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">处理描述 <span class="text-red-500">*</span></label>
                        <textarea v-model="handleForm.description" rows="4"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                            placeholder="请详细描述处理措施和具体步骤..." maxlength="500" required></textarea>
                        <div class="text-xs text-gray-500 mt-1">{{ (handleForm.description || '').length }}/500</div>
                    </div>

                    <!-- 处理人员 -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">处理人员 <span class="text-red-500">*</span></label>
                        <select v-model="handleForm.handler"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                            <option value="">请选择处理人员</option>
                            <option value="张工程师">张工程师</option>
                            <option value="李主管">李主管</option>
                            <option value="王安全员">王安全员</option>
                            <option value="刘技术员">刘技术员</option>
                            <option value="赵班长">赵班长</option>
                        </select>
                    </div>

                    <!-- 优先级和截止时间 -->
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">优先级</label>
                            <select v-model="handleForm.priority"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="low">低</option>
                                <option value="normal">中</option>
                                <option value="high">高</option>
                                <option value="urgent">紧急</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">截止时间</label>
                            <input type="datetime-local" v-model="handleForm.deadline"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>

                    <!-- 附件上传 -->
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">相关附件</label>
                        <input type="file" multiple @change="handleFileUpload"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <div v-if="handleForm.attachments.length > 0" class="mt-2">
                            <div v-for="(file, index) in handleForm.attachments" :key="index"
                                class="flex items-center justify-between bg-gray-50 p-2 rounded mb-1">
                                <span class="text-sm text-gray-700">{{ file.name }}</span>
                                <button type="button" @click="removeAttachment(index)"
                                    class="text-red-500 hover:text-red-700">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end space-x-4">
                        <button type="button" @click="showHandleModal = false"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 !rounded-button whitespace-nowrap cursor-pointer">
                            取消
                        </button>
                        <button type="submit"
                            class="px-4 py-2 bg-orange-600 text-white rounded hover:bg-orange-700 !rounded-button whitespace-nowrap cursor-pointer">
                            提交处理
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
import { ElMessage } from 'element-plus'
export default {
    components: {
    Header,
  },
    data() {
        return {
            // 模态框状态
            showRiskModal: false,
            showAssessmentModal: false,
            showHandleModal: false,
            selectedRisk: {},
            assessmentRisk: {},
            // 下拉菜单状态
            showProbabilityDropdown: false,
            showImpactDropdown: false,
            showTimeDropdown: false,
            showAreaDropdown: false,
            // 筛选条件
            searchKeyword: '',
            selectedTimeRange: '本年度',
            selectedArea: '全部区域',
            // 下拉选项
            timeRangeOptions: ['近 7 天', '近 30 天', '近 90 天', '本月', '本季度', '本年度'],
            areaOptions: ['全部区域', '炼铁厂', '炼钢厂', '轧钢厂', '烧结厂', '动力厂', '原料厂', '环保设施', '厂区边界'],
            // 分页相关
            currentPage: 1,
            pageSize: 10,
            pageSizeOptions: [5, 10, 20, 50],
            // 评估表单
            assessmentForm: {
                probability: 0,
                impact: 0,
                reason: '',
                assessor: ''
            },
            // 处理表单
            handleForm: {
                method: '',
                description: '',
                handler: '',
                priority: 'normal',
                deadline: '',
                attachments: []
            },
            // 评估选项
            probabilityOptions: [
                { value: 1, label: '1 - 极少 (≤10%)' },
                { value: 2, label: '2 - 不太可能 (10%-30%)' },
                { value: 3, label: '3 - 可能 (30%-70%)' },
                { value: 4, label: '4 - 很可能 (70%-90%)' },
                { value: 5, label: '5 - 几乎确定 (≥90%)' }
            ],
            impactOptions: [
                { value: 1, label: '1 - 可忽略 (可忽略损失)' },
                { value: 2, label: '2 - 轻微 (轻微损失)' },
                { value: 3, label: '3 - 中等 (中等损失)' },
                { value: 4, label: '4 - 严重 (重大损失)' },
                { value: 5, label: '5 - 灾难性 (极重大损失)' }
            ],
            // 风险历史记录
            riskHistory: [
                {
                    action: '风险首次发现并记录',
                    time: '2025-07-08 09:15:32',
                    operator: '系统自动'
                },
                {
                    action: '完成初步风险评估',
                    time: '2025-07-08 09:30:15',
                    operator: '张工程师'
                },
                {
                    action: '制定控制措施',
                    time: '2025-07-08 10:00:45',
                    operator: '李主管'
                },
                {
                    action: '开始实施控制措施',
                    time: '2025-07-08 10:30:22',
                    operator: '设备维护部'
                }
            ],
            // 风险处理建议
            riskSuggestions: [
                '立即组织专业技术人员进行现场检查，确定故障具体位置和原因',
                '临时调整工艺参数，确保生产安全',
                '准备备用设备和零部件，以应对可能的紧急情况',
                '加强监测频率，每小时记录一次相关参数',
                '制定应急预案，明确各部门职责和处置流程'
            ],
            // 导航菜单
            mainMenus: [
                {
                    name: '监测报警',
                    icon: 'fas fa-bell',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '数据汇聚功能', active: false, link: '/data-aggregation' },
                        { name: '监测指标统计', active: false, link: '/monitoring-indicators' },
                        { name: '区域化展示', active: false, link: '/regional-display' }
                    ]
                },
                {
                    name: '风险研判',
                    icon: 'fas fa-exclamation-triangle',
                    expanded: true,
                    active: true,
                    subMenus: [
                        { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: true, link: '/risk-analysis' },
                        // { name: '重点风险提示', active: false, link: '/focus' },
                    ]
                },
                {
                    name: '在线巡查',
                    icon: 'fas fa-search',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '企业信息汇总', active: false, link: '/summary-information' },
                        { name: '巡查功能', active: false, link: '/patrol' },
                        { name: '检索功能', active: false, link: 'search' },
                        { name: '一屏汇聚展示', active: false, link: '/screen-display' }
                    ]
                },
                {
                    name: '综合分析',
                    icon: 'fas fa-chart-line',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '联网与设备分析', active: false, link: '/equipment' },
                        { name: '应用情况分析', active: false, link: '/application' },
                        { name: '数据质量分析', active: false, link: '/data-quality' },
                        { name: '定期专题报告', active: false, link: 'report' }
                    ]
                },
                {
                    name: '系统管理',
                    icon: 'fas fa-cog',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '用户权限管理', active: false, link: 'user-permission' },
                        { name: '系统配置管理', active: false, link: 'system-manage' },
                        { name: '数据管理', active: false, link: 'data-manage' },
                        { name: '系统监控与维护', active: false, link: 'monitoring' }
                    ]
                }
            ],
            // 风险等级筛选
            riskLevels: [
                { name: '全部', active: true, activeClass: 'bg-blue-100 text-blue-600', dotClass: 'bg-blue-600' },
                { name: '高风险', active: false, activeClass: 'bg-red-100 text-red-600', dotClass: 'bg-red-600' },
                { name: '中风险', active: false, activeClass: 'bg-orange-100 text-orange-600', dotClass: 'bg-orange-600' },
                { name: '低风险', active: false, activeClass: 'bg-yellow-100 text-yellow-600', dotClass: 'bg-yellow-600' }
            ],
            // 风险列表数据
            allRisks: [
                {
                    id: 'R2025070801',
                    type: '设备风险',
                    source: '自动监测',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-red-600',
                    description: '3号高炉冷却系统温度异常，超过安全阈值20%，存在设备损坏风险',
                    area: '炼铁厂',
                    location: '3号高炉',
                    date: '2025-07-08',
                    time: '09:15:32',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800'
                },
                {
                    id: 'R2025070802',
                    type: '安全风险',
                    source: '人工上报',
                    icon: 'fas fa-user-hard-hat',
                    iconBg: 'bg-blue-600',
                    description: '2号转炉区域发现气体泄漏，现场检测氧气浓度低于标准值，需立即处理',
                    area: '炼钢厂',
                    location: '2号转炉',
                    date: '2025-07-08',
                    time: '08:45:17',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800'
                },
                {
                    id: 'R2025070803',
                    type: '环境风险',
                    source: '自动监测',
                    icon: 'fas fa-cloud',
                    iconBg: 'bg-green-600',
                    description: '烧结机废气处理系统效率下降，排放指标接近限值，需检查维护',
                    area: '烧结厂',
                    location: '1号烧结机',
                    date: '2025-07-08',
                    time: '07:30:45',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070704',
                    type: '设备风险',
                    source: '自动监测',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-red-600',
                    description: '热轧生产线轧机传动系统振动异常，超过预警阈值15%',
                    area: '轧钢厂',
                    location: '热轧生产线',
                    date: '2025-07-07',
                    time: '16:20:11',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070705',
                    type: '安全风险',
                    source: '人工上报',
                    icon: 'fas fa-user-hard-hat',
                    iconBg: 'bg-blue-600',
                    description: '锅炉房蒸汽管道压力异常，安全阀响应迟缓，存在爆管风险',
                    area: '动力厂',
                    location: '锅炉房',
                    date: '2025-07-07',
                    time: '15:05:38',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800'
                },
                {
                    id: 'R2025070706',
                    type: '环境风险',
                    source: '自动监测',
                    icon: 'fas fa-cloud',
                    iconBg: 'bg-green-600',
                    description: '厂区东北角噪声监测点数值超标5dB，需排查噪声源',
                    area: '厂区边界',
                    location: '东北角',
                    date: '2025-07-07',
                    time: '14:15:22',
                    level: '低风险',
                    levelClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    id: 'R2025070707',
                    type: '设备风险',
                    source: '自动监测',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-red-600',
                    description: '连铸机冷却水系统压力波动，冷却效率降低，影响产品质量',
                    area: '炼钢厂',
                    location: '连铸机',
                    date: '2025-07-07',
                    time: '11:40:56',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070708',
                    type: '安全风险',
                    source: '人工上报',
                    icon: 'fas fa-user-hard-hat',
                    iconBg: 'bg-blue-600',
                    description: '原料堆场防尘网部分破损，大风天气可能导致粉尘飞扬',
                    area: '原料厂',
                    location: '堆场',
                    date: '2025-07-07',
                    time: '10:25:19',
                    level: '低风险',
                    levelClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    id: 'R2025070609',
                    type: '环境风险',
                    source: '自动监测',
                    icon: 'fas fa-cloud',
                    iconBg: 'bg-green-600',
                    description: '废水处理站COD在线监测数值波动，接近排放上限',
                    area: '环保设施',
                    location: '废水处理站',
                    date: '2025-07-06',
                    time: '16:50:33',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070610',
                    type: '设备风险',
                    source: '自动监测',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-red-600',
                    description: '高压配电室1号变压器温度异常升高，达到预警温度，需紧急检查',
                    area: '动力厂',
                    location: '配电室',
                    date: '2025-07-06',
                    time: '14:10:45',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800'
                },
                {
                    id: 'R2025070511',
                    type: '安全风险',
                    source: '人工上报',
                    icon: 'fas fa-user-hard-hat',
                    iconBg: 'bg-blue-600',
                    description: '氧气站管道接头处发现微小泄漏，需紧急处理',
                    area: '动力厂',
                    location: '氧气站',
                    date: '2025-07-05',
                    time: '11:25:40',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800'
                },
                {
                    id: 'R2025070512',
                    type: '环境风险',
                    source: '自动监测',
                    icon: 'fas fa-cloud',
                    iconBg: 'bg-green-600',
                    description: '2号除尘器布袋破损，粉尘排放浓度上升',
                    area: '烧结厂',
                    location: '除尘系统',
                    date: '2025-07-05',
                    time: '10:15:22',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070513',
                    type: '设备风险',
                    source: '自动监测',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-red-600',
                    description: '精轧机液压系统压力不稳定，影响产品精度',
                    area: '轧钢厂',
                    location: '精轧机',
                    date: '2025-07-05',
                    time: '09:30:18',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070414',
                    type: '安全风险',
                    source: '人工上报',
                    icon: 'fas fa-user-hard-hat',
                    iconBg: 'bg-blue-600',
                    description: '1号皮带输送机安全防护罩松动，存在安全隐患',
                    area: '原料厂',
                    location: '输送系统',
                    date: '2025-07-04',
                    time: '16:45:33',
                    level: '低风险',
                    levelClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    id: 'R2025070415',
                    type: '环境风险',
                    source: '自动监测',
                    icon: 'fas fa-cloud',
                    iconBg: 'bg-green-600',
                    description: '雨水排放口pH值异常，可能存在酸碱物质泄漏',
                    area: '环保设施',
                    location: '雨水排放口',
                    date: '2025-07-04',
                    time: '14:20:56',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070416',
                    type: '设备风险',
                    source: '自动监测',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-red-600',
                    description: '2号高炉炉顶压力波动，需检查密封系统',
                    area: '炼铁厂',
                    location: '2号高炉',
                    date: '2025-07-04',
                    time: '11:10:45',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070317',
                    type: '安全风险',
                    source: '人工上报',
                    icon: 'fas fa-user-hard-hat',
                    iconBg: 'bg-blue-600',
                    description: '炼钢车间1号行车制动系统异常，需紧急检修',
                    area: '炼钢厂',
                    location: '1号行车',
                    date: '2025-07-03',
                    time: '15:35:27',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800'
                },
                {
                    id: 'R2025070318',
                    type: '环境风险',
                    source: '自动监测',
                    icon: 'fas fa-cloud',
                    iconBg: 'bg-green-600',
                    description: '厂区西南角扬尘监测点PM10浓度超标，需加强抑尘',
                    area: '厂区边界',
                    location: '西南角',
                    date: '2025-07-03',
                    time: '13:40:19',
                    level: '低风险',
                    levelClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    id: 'R2025070319',
                    type: '设备风险',
                    source: '自动监测',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-red-600',
                    description: '连铸机结晶器水平振动增大，影响铸坯质量',
                    area: '炼钢厂',
                    location: '连铸机',
                    date: '2025-07-03',
                    time: '10:25:38',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070220',
                    type: '安全风险',
                    source: '人工上报',
                    icon: 'fas fa-user-hard-hat',
                    iconBg: 'bg-blue-600',
                    description: '煤气管道阀门密封不严，存在微量泄漏',
                    area: '动力厂',
                    location: '煤气管网',
                    date: '2025-07-02',
                    time: '16:15:42',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800'
                }
            ]
        };
    },
    computed: {
        // 根据筛选条件过滤风险列表
        filteredRisks() {
            let result = [...this.allRisks];
            // 按风险等级筛选
            if (!this.riskLevels[0].active) {
                const selectedLevels = this.riskLevels
                    .filter(level => level.active)
                    .map(level => level.name);
                if (selectedLevels.length > 0) {
                    result = result.filter(risk => selectedLevels.includes(risk.level));
                }
            }
            // 按时间范围筛选
            result = result.filter(risk => this.isWithinTimeRange(risk.date));
            // 按区域筛选
            if (this.selectedArea !== '全部区域') {
                result = result.filter(risk => risk.area === this.selectedArea);
            }
            // 按关键词搜索
            if (this.searchKeyword.trim()) {
                const keyword = this.searchKeyword.toLowerCase().trim();
                result = result.filter(risk =>
                    risk.description.toLowerCase().includes(keyword) ||
                    risk.id.toLowerCase().includes(keyword) ||
                    risk.type.toLowerCase().includes(keyword) ||
                    risk.area.toLowerCase().includes(keyword) ||
                    risk.location.toLowerCase().includes(keyword)
                );
            }
            return result;
        },
        // 分页后的风险列表
        paginatedRisks() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.filteredRisks.slice(start, end);
        },
        // 总页数
        totalPages() {
            return Math.ceil(this.filteredRisks.length / this.pageSize);
        },
        // 显示的页码范围
        displayedPages() {
            const range = 2; // 当前页前后显示的页数
            let start = Math.max(1, this.currentPage - range);
            let end = Math.min(this.totalPages, this.currentPage + range);
            // 调整以确保始终显示5个页码（如果有足够的页数）
            const displayCount = end - start + 1;
            if (displayCount < 5 && this.totalPages > 5) {
                if (start === 1) {
                    end = Math.min(5, this.totalPages);
                } else if (end === this.totalPages) {
                    start = Math.max(1, this.totalPages - 4);
                }
            }
            const pages = [];
            for (let i = start; i <= end; i++) {
                pages.push(i);
            }
            return pages;
        },
        // 风险统计
        totalRisks() {
            return this.allRisks.length;
        },
        highRisksCount() {
            return this.allRisks.filter(risk => risk.level === '高风险').length;
        },
        mediumRisksCount() {
            return this.allRisks.filter(risk => risk.level === '中风险').length;
        },
        lowRisksCount() {
            return this.allRisks.filter(risk => risk.level === '低风险').length;
        },
        // 评估表单验证
        isFormValid() {
            return (
                this.assessmentForm.probability > 0 &&
                this.assessmentForm.impact > 0 &&
                this.assessmentForm.reason.trim() !== '' &&
                this.assessmentForm.assessor.trim() !== ''
            );
        },
        // 风险评分计算
        calculateRiskScore() {
            return this.assessmentForm.probability * this.assessmentForm.impact;
        },
        // 风险等级计算
        calculateRiskLevel() {
            const score = this.calculateRiskScore;
            if (score >= 15) {
                return { label: '高风险', class: 'bg-red-100 text-red-800' };
            } else if (score >= 8) {
                return { label: '中风险', class: 'bg-orange-100 text-orange-800' };
            } else {
                return { label: '低风险', class: 'bg-yellow-100 text-yellow-800' };
            }
        }
    },
    methods: {
        // 时间范围筛选辅助方法
        isWithinTimeRange(riskDate) {
            const riskDateTime = new Date(riskDate);
            const now = new Date();
            
            switch (this.selectedTimeRange) {
                case '近 7 天':
                    const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
                    return riskDateTime >= sevenDaysAgo;
                case '近 30 天':
                    const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
                    return riskDateTime >= thirtyDaysAgo;
                case '近 90 天':
                    const ninetyDaysAgo = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000);
                    return riskDateTime >= ninetyDaysAgo;
                case '本月':
                    const currentMonth = now.getMonth();
                    const currentYear = now.getFullYear();
                    return riskDateTime.getMonth() === currentMonth && riskDateTime.getFullYear() === currentYear;
                case '本季度':
                    const currentQuarter = Math.floor(now.getMonth() / 3);
                    const riskQuarter = Math.floor(riskDateTime.getMonth() / 3);
                    return riskQuarter === currentQuarter && riskDateTime.getFullYear() === now.getFullYear();
                case '本年度':
                    return riskDateTime.getFullYear() === now.getFullYear();
                case '自定义':
                    // 自定义时间范围的逻辑可以后续扩展
                    return true;
                default:
                    return true;
            }
        },
        // 筛选相关方法
        toggleRiskLevel(index) {
            if (index === 0) {
                // 如果点击"全部"，则只激活"全部"
                this.riskLevels.forEach((level, i) => {
                    level.active = i === 0;
                });
            } else {
                // 如果点击其他级别，则取消"全部"的激活状态
                this.riskLevels[0].active = false;
                // 切换当前点击的级别的激活状态
                this.riskLevels[index].active = !this.riskLevels[index].active;
                // 如果所有具体级别都未激活，则激活"全部"
                const anyActive = this.riskLevels.slice(1).some(level => level.active);
                if (!anyActive) {
                    this.riskLevels[0].active = true;
                }
            }
        },
        toggleTimeDropdown() {
            this.showTimeDropdown = !this.showTimeDropdown;
            this.showAreaDropdown = false;
        },
        toggleAreaDropdown() {
            this.showAreaDropdown = !this.showAreaDropdown;
            this.showTimeDropdown = false;
        },
        selectTimeRange(option) {
            this.selectedTimeRange = option;
            this.showTimeDropdown = false;
        },
        selectArea(option) {
            this.selectedArea = option;
            this.showAreaDropdown = false;
        },
        resetFilters() {
            this.riskLevels.forEach((level, i) => {
                level.active = i === 0;
            });
            this.selectedTimeRange = '近 30 天';
            this.selectedArea = '全部区域';
            this.searchKeyword = '';
            this.currentPage = 1;
        },
        applyFilters() {
            // 应用筛选后重置到第一页
            this.currentPage = 1;
        },
        // 分页相关方法
        goToPage(page) {
            if (page >= 1 && page <= this.totalPages) {
                this.currentPage = page;
            }
        },
        // 风险详情相关方法
        viewRiskDetail(risk) {
            this.selectedRisk = risk;
            this.showRiskModal = true;
        },
        // 风险评估相关方法
        openAssessmentModal(risk) {
            this.assessmentRisk = risk;
            this.showAssessmentModal = true;
            this.resetAssessmentForm();
        },
        toggleProbabilityDropdown() {
            this.showProbabilityDropdown = !this.showProbabilityDropdown;
            this.showImpactDropdown = false;
        },
        toggleImpactDropdown() {
            this.showImpactDropdown = !this.showImpactDropdown;
            this.showProbabilityDropdown = false;
        },
        selectProbability(value) {
            this.assessmentForm.probability = value;
            this.showProbabilityDropdown = false;
        },
        selectImpact(value) {
            this.assessmentForm.impact = value;
            this.showImpactDropdown = false;
        },
        resetAssessmentForm() {
            this.assessmentForm = {
                probability: 0,
                impact: 0,
                reason: '',
                assessor: ''
            };
        },
        submitAssessment() {
            if (!this.isFormValid) return;
            const assessment = {
                riskId: this.assessmentRisk.id,
                probability: this.assessmentForm.probability,
                impact: this.assessmentForm.impact,
                score: this.calculateRiskScore,
                level: this.calculateRiskLevel.label,
                reason: this.assessmentForm.reason,
                assessor: this.assessmentForm.assessor,
                date: new Date().toLocaleString()
            };
            // 这里可以添加向后端提交评估数据的逻辑
            // 更新风险列表中的评估结果
            const riskIndex = this.allRisks.findIndex(risk => risk.id === this.assessmentRisk.id);
            if (riskIndex !== -1) {
                this.allRisks[riskIndex].level = this.calculateRiskLevel.label;
                this.allRisks[riskIndex].levelClass = this.calculateRiskLevel.class;
            }
            // 关闭模态框
            this.showAssessmentModal = false;
        },
        // 导航菜单相关方法
        toggleMenu(index) {
            this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
            // 如果展开了菜单，则将其他菜单收起
            if (this.mainMenus[index].expanded) {
                this.mainMenus.forEach((menu, i) => {
                    if (i !== index) {
                        menu.expanded = false;
                    }
                });
            }
        },
        selectSubmenu(menuIndex, submenuIndex) {
            // 重置所有菜单的激活状态
            this.mainMenus.forEach(menu => {
                menu.active = false;
                menu.subMenus.forEach(submenu => {
                    submenu.active = false;
                });
            });
            // 设置当前选中的菜单和子菜单为激活状态
            this.mainMenus[menuIndex].active = true;
            this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
            const link = this.mainMenus[menuIndex].subMenus[submenuIndex].link;
            if (link) {
                const dest = link.startsWith('/') ? link : `/${link}`;
                this.$router.push(dest);
            }
        },
        // 导出数据方法
        exportRiskData() {
            try {
                // 获取当前筛选后的风险数据
                const dataToExport = this.filteredRisks;
                
                if (dataToExport.length === 0) {
                    ElMessage.success('没有可导出的数据！');
                    return;
                }

                // 准备CSV数据
                const csvData = dataToExport.map((risk, index) => ({
                    '序号': index + 1,
                    '风险名称': risk.name,
                    '风险等级': risk.level,
                    '风险类型': risk.type,
                    '所属区域': risk.area,
                    '发现时间': risk.date,
                    '风险描述': risk.description,
                    '当前状态': risk.status,
                    '负责人': risk.responsible || '未分配'
                }));

                // 生成CSV内容
                const headers = Object.keys(csvData[0]);
                const csvContent = [
                    headers.join(','),
                    ...csvData.map(row => headers.map(header => `"${row[header] || ''}"`).join(','))
                ].join('\n');

                // 创建并下载文件
                const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                
                // 生成文件名
                const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
                const filename = `风险数据导出_${timestamp}.csv`;
                link.setAttribute('download', filename);
                
                // 触发下载
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

                ElMessage.success(`风险数据导出成功！\n共导出 ${dataToExport.length} 条记录\n文件名：${filename}`);
            } catch (error) {
                ElMessage.success('导出数据失败，请稍后重试！');
            }
        },
        // 刷新数据方法
        refreshData() {
            try {
                // 重置筛选条件
                this.riskLevels.forEach((level, i) => {
                    level.active = i === 0; // 只激活"全部"
                });
                this.selectedTimeRange = '本年度';
                this.selectedArea = '全部区域';
                this.searchKeyword = '';
                this.currentPage = 1;
                
                // 关闭所有下拉菜单
                this.showTimeDropdown = false;
                this.showAreaDropdown = false;
                
                // 这里可以添加从后端重新获取数据的逻辑
                // 例如：await this.fetchRiskData();
                
                // 显示刷新成功提示
                ElMessage.success('数据刷新成功！筛选条件已重置。');
                
            } catch (error) {
                ElMessage.success('刷新数据失败，请稍后重试！');
            }
        },
        // 打开风险处理模态框
        openHandleModal(risk) {
            
            this.selectedRisk = { ...risk };
            
            // 重置处理表单
            this.handleForm = {
                method: '',
                description: '',
                handler: '',
                priority: 'normal',
                deadline: '',
                attachments: []
            };
            
            this.showHandleModal = true;
        },
        // 提交风险处理
        submitHandle() {
            
            // 检查表单字段是否存在
            
            // 表单验证
            const isMethodValid = this.handleForm.method && this.handleForm.method.trim() !== '';
            const isDescriptionValid = this.handleForm.description && this.handleForm.description.trim() !== '';
            const isHandlerValid = this.handleForm.handler && this.handleForm.handler.trim() !== '';
            
            
            if (!isMethodValid || !isDescriptionValid || !isHandlerValid) {
                ElMessage.success('请填写完整的处理信息！\n处理方式: ' + (isMethodValid ? '✓' : '✗') + '\n处理描述: ' + (isDescriptionValid ? '✓' : '✗') + '\n处理人员: ' + (isHandlerValid ? '✓' : '✗'));
                return;
            }
            
            
            try {
                // 简化的处理逻辑 - 暂时只显示成功消息
                ElMessage.success('风险处理任务已提交成功！');
                this.showHandleModal = false;
                
                // 重置表单
                this.handleForm = {
                    method: '',
                    description: '',
                    handler: '',
                    priority: 'normal',
                    deadline: '',
                    attachments: []
                };
                
            } catch (error) {
                ElMessage.success('提交失败，请稍后重试！错误信息: ' + error.message);
            }
        },
        // 处理文件上传
        handleFileUpload(event) {
            const files = Array.from(event.target.files);
            this.handleForm.attachments.push(...files);
        },
        // 移除附件
        removeAttachment(index) {
            this.handleForm.attachments.splice(index, 1);
        }
    }
};
</script>
<style scoped>
/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 自定义选择器样式 */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4 6 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
    padding-right: 2rem;
}

/* 文本截断样式 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>